<template>
    <div class="movie-detial">
        <loading-animation v-if="isload" :showText="true"></loading-animation>
        <div class="bigbox" v-else :style="{'backgroundColor':movie.backgroundColor}">
            <div class="box">
                <div class="detialnav">
                    <router-link to="/">
                        <span>猫眼电影</span>
                    </router-link>
                    <i class="iconfont icon-xiangyoujiantou-1"></i>
                    <span>{{movie.nm}}</span>
                </div>
                <div class="title">
                    <div class="img">
                        <img :src="coverUrl"/>
                    </div>
                    <div class="describe">
                        <p class="movie-name">{{movie.nm}}</p>
                        <div class="enm">
                            <span>{{movie.enm}}</span>
                        </div>
                        <div class="cat">
                            <span>{{movie.cat|filtext}}</span>
                        </div>
                        <div class="star">
                            <span>{{movie.star|filtext}}</span>
                        </div>
                        <div class="onlineDate">
                            <span>{{movie.onlineDate}}</span>&nbsp;/&nbsp;<span>{{movie.dur}}分钟</span>
                        </div>
                        <div class="btn">
                            <div class="want" @click="wanted" :style="{'color':iswant?'rgb(230,0,0)':'#fff'}">
                                <i class="iconfont icon-w_aixin"></i>&nbsp;想看
                            </div>
                            <div class="looked" @click="looked" :style="{'color':islooked?'rgb(230,0,0)':'#fff'}">
                                <i class="iconfont icon-xingxing"></i>&nbsp;看过
                            </div>
                        </div>
                    </div>
                </div>
                <div class="score">
                    <div class="top">
                        <div class="scoreLabel">
                            <i class="logo-new"></i>
                            <span>&nbsp;{{movie.scoreLabel}}</span>
                        </div>
                        <div class="wish">
                            <span class="nums">{{movie.wish|filnums}}</span>
                            <span>&nbsp;人想看</span>
                        </div>
                        <div class="watched">
                            <span class="nums">{{movie.watched|filnums}}</span>
                            <span>&nbsp;人看过</span>
                            <span><i class="iconfont icon-xiangyoujiantou-1"></i></span>
                        </div>
                    </div>
                </div>
                <div class="dra">
                    <div class="ti">
                        <h2>简介</h2>
                        <div @click.stop="close=!close">{{close?'展开':'收起'}}&nbsp;<i :class="['iconfont',close?'icon-xiajiantou-1':'icon-shangjiantou-1']"></i></div>
                    </div>
                    <p :class="{'close':close}">{{movie.dra}}</p>
                </div>
                <div class="celebrities">
                    <div class="ti">
                        <h2>演职人员</h2>
                        <div>全部&nbsp;<i class="iconfont icon-xiangyoujiantou-1"></i></div>
                    </div>
                    <ul class="starimg">
                        <template v-for="(item,index) in celebrities">
                            <li v-if="item.desc.length>0" :key="index">
                                <!-- <router-link :to="`/moviedetial/${item.movieId}`"> -->
                                    <star-img :item="item"></star-img>
                                <!-- </router-link> -->
                            </li>
                        </template>
                    </ul>
                </div>
                <div class="feeds" v-if="feedVideos">
                    <div class="ti">
                        <h2>视频推荐</h2>
                        <router-link :to="`/feeddetial/${movieId}/${feedVideos.feeds[0].id}`">
                            <div>全部&nbsp;<i class="iconfont icon-xiangyoujiantou-1"></i></div>
                        </router-link>
                    </div>
                    <ul class="feedVideos">
                        <li v-for="item in feedVideos.feeds" :key="item.id">
                            <router-link :to="`/feeddetial/${movieId}/${item.id}`">
                                <feed-img :images="item.images[0].url" :isVideo="true"></feed-img>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="photos" v-if="movie.pn>0">
                    <div class="ti">
                        <h2>剧照</h2>
                        <!-- <router-link :to="`/feeddetial/${movieId}/${feedVideos.feeds[0].id}`"> -->
                            <div>全部{{movie.pn}}张&nbsp;<i class="iconfont icon-xiangyoujiantou-1"></i></div>
                        <!-- </router-link> -->
                    </div>
                    <ul class="movie-photo">
                        <li v-for="(item,index) in movie.photos" :key="item" @click="showBig(index)">
                            <!-- <router-link :to="`/feeddetial/${movieId}/${item.id}`"> -->
                                <feed-img :images="item"></feed-img>
                            <!-- </router-link> -->
                        </li>
                    </ul>

                    <van-image-preview v-model="show" :images="images" :start-position="startPosition">
                    </van-image-preview>
                </div>
            </div>

            <div class="comments" v-if="comments.total>0">
                <h2>短评&nbsp;({{comments.total}})</h2>
                <ul class="describe">
                    <li v-for="item in comments.hotComments" :key="item.id">
                        <comment-list :item="item" @upCount="upcount($event)"></comment-list>
                    </li>
                </ul>
            </div>

            <div class="questions" v-if="questions.total>0">
                <h2>讨论&nbsp;({{questions.total}})</h2>
                <ul class="describe">
                    <li v-for="(item,index) in questions.questions" :key="index">
                        <question-list :item="item" @upCount="upcount($event)"></question-list>
                    </li>
                </ul>
            </div>

            <div class="filmReviews" v-if="filmReviews.total>0">
                <h2>长评&nbsp;({{filmReviews.total}})</h2>
                <ul class="describe">
                    <li v-for="(item,index) in filmReviews.filmReviews" :key="index">
                        <film-reviews :item="item"></film-reviews>
                    </li>
                </ul>
            </div>

            <div class="bt-line"></div>

            <div class="relatedMovies">
                <h2>相关影片</h2>
                <ul class="imgBox">
                    <li v-for="item in relatedMovies" :key="item.id">
                        <router-link :to="`/moviedetial/${item.id}`">
                        <img-item :item="item"></img-item>
                        </router-link>
                    </li>
                </ul>
            </div>

            <div class="mtrade">
                <div>
                    <van-button round color="linear-gradient(-90deg,#fb3333,#ff5269)" :to="`/mtrade/${movie.id}`" size="large">特惠购票</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LoadingAnimation from '@/components/LoadingAnimation.vue';
import StarImg from '@/components/StarImg.vue';
import FeedImg from '@/components/FeedImg.vue';
import CommentList from '@/components/CommentList.vue';
import QuestionList from '../components/QuestionList.vue';
import FilmReviews from '../components/FilmReviews.vue';
import ImgItem from '../components/ImgItem.vue';

export default {
    props:['movieId'],
    data(){
        return{
            isload:true,
            movie:null,
            comments:null,
            celebrities:[],
            feedVideos:null,
            relatedMovies:[],
            questions:null,
            filmReviews:null,
            iswant:false,
            islooked:false,
            close:true,
            show: false,
            startPosition: 0,
            images: [],
        }
    },
    created(){
        console.log(this.movieId,'电影ID');
        this.getdetial();
    },
    beforeRouteUpdate(to,from,next){
        next();
        this.$router.go(0);
    },
    methods:{
        async getdetial(){
            let re=await this.axios.get('movie/detail?movieid='+this.movieId);
            this.movie=re.data.movie;
            this.comments=re.data.comments;
            this.celebrities=re.data.celebrities;
            this.feedVideos=re.data.feedVideos;
            this.relatedMovies=re.data.relatedMovies;
            this.questions=re.data.questions;
            this.filmReviews=re.data.filmReviews;
            this.isload=false;
            let img=this.movie.photos;
            let arr=img.map(item=>{
                return item.replace('w.h','1740.2500');
            })
            this.images.push(...arr);
        },
        // onChange() {
        //     this.show = false;
        // },
        showBig(index){
            this.startPosition=index;
            this.show=true;
        },
        wanted(){
            this.iswant=!this.iswant;
            let a=this.movie.wish;
            if(this.iswant){
                a+=1;
            }else{
                a-=1;
            }
            this.movie.wish=a;
        },
        looked(){
            this.islooked=!this.islooked;
            let b=this.movie.watched;
            if(this.islooked){
                b+=1;
            }else{
                b-=1;
            }
            this.movie.watched=b;
        },
        upcount(el){
            this.comments.hotComments.forEach((item,index)=>{
                let a=null;
                if(item.id==el.commentId){
                    a=this.comments.hotComments[index];
                    if(el.liked){
                        a.upCount+=1;
                    }else{
                        a.upCount-=1;
                    }
                    this.comments.hotComments[index]=a;
                }
            })
        }
    },
    computed:{
        coverUrl(){
            let sr=this.movie.img.replace('w.h',"100.138");
            return sr;
        },
    },
    filters:{
        filtext(text){
            if(!text){
                return "";
            }
            let index=text.indexOf(',');
            if(index>0){
                let a=text.replaceAll(",",' / ');
                return a;
            }else{
                return text;
            }
        },
        filnums(num){
            if(num/1000>1){
                if(num/1000000>1){
                    if(num/100000000>1){
                        let a=num/100000000;
                        return a.toFixed(3)+"亿";
                    }else{
                        let mill=parseInt(num/1000000);
                        let k=parseInt((num-(mill*1000000))/1000);
                        let h=num-(mill*1000000+k*1000);
                        let str=mill+","+k+","+h;
                        return str;
                    }
                }else{
                    let k=parseInt(num/1000);
                    let h=num-(k*1000);
                    let str=k+","+h;
                    return str;
                }
            }else{
                return num;
            }
        }
    },
    components:{
        LoadingAnimation,
        StarImg,
        FeedImg,
        CommentList,
        QuestionList,
        FilmReviews,
        ImgItem,
    }
}
</script>

<style lang="less" scoped>
.bigbox{
    padding-bottom: 60px;
}

.box{
    padding: 21px 16px;

    .detialnav{
        color: #ccc;
        font-size: 14px;
        line-height: 30px;
        padding-bottom: 7px;

        span{
            color: #ccc;
        }
    }

    .title{
        display: flex;

        .img{
            width: 100px;
            height: 138px;
            margin-right: 10px;

            img{
                display: block;
                width: 100%;
            }
        }

        .describe{
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            color: rgba(255,255,255,.6);
            line-height: 18px;

            .movie-name{
                color: #fff;
                font-size: 20px;
                font-weight: 600;
                line-height: 35px;
                margin-bottom: 5px;
            }

            .movie-name,.enm,.cat,.star,.onlineDate{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .onlineDate{
                margin-top: 3px;
            }

            .btn{
                width: 100%;
                display: flex;
                justify-content: space-between;

                .want,.looked{
                    width: 48%;
                    font-size: 14px;
                    color: #fff;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 5px;
                    background: hsla(0,0%,100%,.35);
                }
            }
        }
    }

    .score{
        margin-top: 15px;
        margin-bottom: 0;
        padding: 10px;
        border-radius: 5px;
        font-size: 12px;
        background-color: rgba(0,0,0,.18);

        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .scoreLabel{
                color: #fff;
                line-height: 16px;

                .logo-new{
                    display: inline-block;
                    vertical-align: middle;
                    width: 16px;
                    height: 16px;
                    background: url(../assets/logo-new.png) no-repeat;
                    background-size: contain;
                }
            }

            .watched,.wish{
                color: rgba(255,255,255,.6);
                line-height: 16px;
                height: 16px;

                i{
                    font-size: 14px;
                    vertical-align: bottom;
                }
            }
        }
    }

    .ti{
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        color: #fff;
        font-size: 15px;

        div{
            font-size: 12px;
            color: rgba(255,255,255,.6);

            i{
                vertical-align: bottom;
            }
        }
    }

    .dra{
        padding: 16px 0px;
        overflow: hidden;
        font-size: 15px;
        color: #fff;

        p{
            line-height: 25px;
            letter-spacing: normal;

            &.close{
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .celebrities{

        .starimg{
            padding-top: 5px;
            display: flex;
            overflow: hidden;
            overflow-x: scroll;

            &::-webkit-scrollbar{
                display: none;
            }

            li{
                width: 80px;

                &:not(:last-child){
                    margin-right: 10px;
                }
            }
        }
    }

    .feeds{
        
        .feedVideos{
            padding-top: 5px;
            display: flex;
            overflow: hidden;
            overflow-x: scroll;

            &::-webkit-scrollbar{
                display: none;
            }

            li{
                width: 140px;

                &:not(:last-child){
                    margin-right: 10px;
                }
            }
        }
    }

    .photos{
        padding-top: 10px;

        .movie-photo{
            padding-top: 5px;
            display: flex;
            overflow: hidden;
            overflow-x: scroll;

            &::-webkit-scrollbar{
                display: none;
            }

            li{
                width: 140px;

                &:not(:last-child){
                    margin-right: 10px;
                }
            }
        }
    }

}

.comments{
    background-color: #fff;
    border-radius: 10px 10px 0 0;

    h2{
        font-size: 15px;
        color: #333;
        padding: 13px 16px 0px;
    }
}

.questions{
    background-color: #fff;

    h2{
        font-size: 15px;
        color: #333;
        padding-left: 16px;
        line-height: 45px;
        position: relative;

        &::after{
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #eee;
        }
    }
}

.filmReviews{
    background-color: #fff;

    h2{
        font-size: 15px;
        color: #333;
        padding-left: 16px;
        line-height: 45px;
    }
}

.bt-line{
    width: 100%;
    height: 12px;
    background-color: #f5f5f5;
}

.relatedMovies{
    background-color: #fff;
    padding-bottom: 10px;

    h2{
        font-size: 15px;
        color: #333;
        padding-left: 16px;
        line-height: 45px;
    }

    .imgBox{
    // width: 100%;
    padding-top: 5px;
    margin: 0 10px;
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    &::-webkit-scrollbar{
      display: none;
    }

    li{
      width: 85px;

      &:not(:last-child){
        margin-right: 10px;
      }
    }
  }
}

.mtrade{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 50px;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    padding: 10px 0;

    div{
        padding: 0 10px;
    }
}
</style>